<script setup lang="ts">
import layout from '@/components/auto-scale.vue'
import commonHeader from '@/components/header.vue'
import Middle from '@/views/screen/index/components/middle.vue'
import Left from '@/views/screen/index/components/left.vue'
import Right from '@/views/screen/index/components/right.vue'
import CustomModal from '@/views/screen/index/components/custom-modal.vue'
import { reactive } from 'vue'

const modalState = reactive({
  open: false,
  name: '测试弹窗'
})
</script>

<template>
  <layout>
    <commonHeader></commonHeader>
    <div class="main-content">
      <left></left>
      <middle></middle>
      <right></right>
    </div>
    <custom-modal
      v-if="modalState.open"
      @close="modalState.open = false"
      :modalName="modalState.name"
    ></custom-modal>
  </layout>
</template>

<style scoped lang="scss">
.main-content {
  margin-top: -20px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
</style>
